<template>
    <view class="content">
        <view class="order-list-container" style="position: relative; ">
            <view class="orderList_bg" v-for="(item, val) in orderList" :key="val"
                :id="item.orderId">
                <view class="orderList">
                    <view class="orderTop">
                        <!-- <van-checkbox v-model="item.isChecked" shape="round" v-if="showMark"
                            @click.stop="onChange('单选', item)" :label-disabled="false"
                            :disabled="item.isXiajia === true && item.isChecked === false ? true : false"
                            use-icon-slot>
                            <image :src="item.isChecked ? activeIcon : inactiveIcon"
                                @click.stop="onChange('单选', item)" slot="icon"
                                class="checked-img" style="height: 16px;width: 16px;" />
                        </van-checkbox> -->
                        <view class="orderTopRight">
                            <view class="listTop" @click="toOrderDetail(item, item.orderNo, item.orderStatus)">
                                <view class="listTopLeft" v-if="activeTab!==5">订单编号：{{ item.orderNo }}</view>
                                <view class="listTopRight" v-if="activeTab!==5"> {{getOrderStatusText(item.orderStatus)}} </view>
                                <view class="listTopRight" v-if="activeTab==5"> {{getAfterSaleOrderTypeText(item.afterSalesType)}}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="goodsDetail">
                        <template v-if="item.orderProducts.length === 1">
                            <view class="wraper_left"
                                v-for="(goods, goodsIndex) in item.orderProducts"
                                :key="goodsIndex" :id="goods.productId"
                                @click="toOrderDetail(item, item.orderNo, item.orderStatus)">
                                <view class="wraper_products_info">
                                    <view class="goodsPic">
                                        <img class="img" :src="goods.imgUrl" mode="widthFix" />
                                    </view>
                                    <view class="goodsText">
                                        <view class="goodsText_top">
                                            <view class="goodsTop">
                                                <view class="goods_T">{{ goods.productName }} </view>
                                                <view class="goods_price">X {{ goods.num }} </view>
                                            </view>
                                            <view class="goodsMiddle">
                                                <view class="goods_specs">{{ goods.productAttrName ? goods.productAttrName : '默认' }} </view>
                                                <!-- <view class="goods_num">X {{ goods.num }}</view> -->
                                            </view>
                                        </view>
                                        <view class="goodsText_bottom">
                                            <view class="jifen_box" v-if="orderStatus == 8 || activeTab == 5" style="width: 100%;">
                                                <span>退款：</span><span v-if="item.refundAmount">￥{{ item.refundAmount }}</span> 
                                                <span v-if="item.refundPoints">
                                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png" alt="" style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;" />
                                                    {{ item.refundPoints }}</span>
                                            </view>
                                            <view class="productActualTotalPay jifen_box" v-else>
                                                <span v-if="item.actualTotalPayAmount && Number(item.actualTotalPayAmount) !== 0" style="margin-right: 16rpx;">￥{{ item.actualTotalPayAmount }}</span>
                                                <span v-if="item.actualTotalPayPoints && Number(item.actualTotalPayPoints) !== 0"><img
                                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                                        alt=""
                                                        style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;" />
                                                    {{ item.actualTotalPayPoints }}</span>
                                            </view>
                                            <!-- 按钮去掉了 -->
                                            <!-- <view class="judgeBtn" v-if="item.orderStatus == 2"> 去评价 </view> -->
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <template v-if="item.orderProducts.length > 1">
                            <view class="goodsDetailInfo_wrapper"
                                @click="toOrderDetail(item, item.orderNo, item.orderStatus)">
                                <view class="goodsListWrapper">
                                    <scroll-view class="top-menu-view hotSale_content"
                                        scroll-x="true" show-scrollbar="false"
                                        :class="(swiperCurrent + 1) === item.orderProducts.length ? 'last-top-menu-view' : ''"
                                        :scroll-into-view="tabCurrent"
                                        :scroll-with-animation="true">
                                        <view class="shangpinList"
                                            v-for="(goods, goodsIndex) in item.orderProducts.slice(0,activeTab === 5 ? 3 : 5)" :id="'tabNum' + (goodsIndex + 1)" :key="goodsIndex">
                                            <view class="renqi_img"> <img :src="goods.imgUrl" alt="" mode="widthFix">
                                                <template v-if="activeTab!==5">
                                                    <view class="status_tips" v-if="goodsIndex===4" @click="toOrderDetail(item, item.orderNo, item.orderStatus)"> 查看全部</view>
                                                </template>
                                                <template v-else>
                                                    <view class="status_tips" v-if="goodsIndex==3" @click="toOrderDetail(item, item.orderNo, item.orderStatus)"> 查看全部</view>
                                                </template>
                                            </view>
                                        </view>
                                    </scroll-view>
                                </view>
                                <view class="goodsListText" v-if="activeTab!==5 && orderStatus!==8">
                                    <view class="goods_price">￥{{item.actualTotalPayAmount  }}</view>
                                    <view class="goods_num">共{{ item.orderProducts.length }}件 </view>
                                </view>
                                <view class="goodsListText" style="width: 28%;" v-else>
                                    <view class="goods_price" style="display: flex; align-items: center;">退款：<span v-if="item.refundAmount && item.refundAmount!=='0'">￥{{item.refundAmount }}</span> <span v-if="item.refundPoints && item.refundPoints!=='0'">{{item.refundPoints}}</span>
                                    </view>
                                    <view class="goods_num">共{{ item.orderProducts.length }}件 </view>
                                </view>
                            </view>
                        </template>
                    </view>
                    <!-- 物流 -->
                    <template v-if="item.orderType !== 1">
                        <template v-if="item.orderStatus !== 5 && item.orderStatus !==8">
                            <!-- 已完成付款的物流 -->
                            <view class="logistics" @click="toLogisticsDetail(item)"
                                v-if="item.orderStatus !== 4 && (item.logisticStatus || item.latestLogisticInfo)">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/logistics.png"
                                    alt="" style="width: 38rpx; height: 28rpx;">
                                <view class="logistics_status">
                                    <span v-if="item.logisticStatus"
                                        style="font-weight: bold;margin-right: 10rpx;"> {{
                                        formatLogisticStatus(item.logisticStatus) }}</span>
                                    <span v-if="item.latestLogisticInfo">{{
                                        item.latestLogisticInfo }} </span>
                                </view>
                            </view>
                            <!-- 待付款 -->
                            <view class="logistics" @click="toLogisticsDetail(item)"
                                v-if="item.orderStatus == 4 && item.orderProductUserBuyNum && item.orderProductUserBuyNum>0">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/clock.png"
                                    alt="" style="width: 28rpx; height: 28rpx;">
                                <view class="logistics_detail">
                                    <span style="color:#FF6203;">{{
                                        item.orderProductUserBuyNum }}</span> 人刚刚购买
                                </view>
                            </view>
                        </template>
                        <view v-if="orderStatus == 8 || activeTab == 5" class="logistics" style="display: flex; align-items: center;">
                            <view class="afterSaleStatus" style="color: #FF6203;">  {{getAfterSaleOrderListStatusText(item.afterSalesListStatus)}} </view>
                            <template v-if="item.afterSalesListStatus==1">
                                <view class="logistics_detail" style="color: #111111;"> {{getAfterSalesProcessStatusText(item.mpAfterSalesStatus)}} </view>
                            </template>
                            <template v-if="item.afterSalesListStatus==2">
                                <view class="logistics_detail" style="display: flex; align-items: center;width: 74%;"> 退款金额 <span>￥{{ item.refundAmount?item.refundAmount:0 }} </span> 
                                    <span style="display: flex; align-items: center;">
                                        <span style="margin-left:12rpx;margin-right:12rpx;">+</span>
                                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png" alt="" style="height: 20rpx; width: 20rpx;" />
                                        <span style="margin-left: 12rpx;">{{ item.refundPoints? item.refundPoints: 0 }}</span>
                                    </span>
                                </view>
                            </template>
                            <template v-if="item.afterSalesListStatus==3">
                                <view class="logistics_detail" style="color: #111111;">退款关闭 </view>
                            </template>
                        </view>
                    </template>
                    <view class="btnArea">
                        <view class="btnAreaLeft" style="position: relative; width:50rpx;">
                            <view @click="popover(item.orderNo,item)" class="moreButton"
                                v-if="orderStatus!==8 && activeTab!==5 &&( (item.orderType=='1'&& item.orderStatus == 4) || (item.orderType =='0' && item.orderStatus!==5  && item.orderStatus!==7) )">
                                更多 </view>
                            <view class="bubble_card"
                                v-if="current === item.orderNo && popoverShow"
                                :style="{top: bubbleTop + 'px', left: bubbleLeft + 'px',}">
                                <view class="bubble-content">
                                    <!-- <view class="popup-text borderbottom"
                                        v-if="item.orderStatus !==4 && item.orderStatus!==5"
                                        @click="showTaxInvoice"
                                        :class="{'activePopup':popupCurrent==0 && (current === item.orderNo && popoverShow)}">
                                        申请开票</view> -->
                                    <!-- 待付款以及实物商品待发货时显示 -->
                                    <view class="popup-text" @click="cancelOrder(item)"
                                        v-if="item.orderStatus == 4 || (item.orderStatus == 0 && item.orderType == 0)"
                                        :class="{'activePopup':popupCurrent==1 && (current === item.orderNo && popoverShow)}">
                                        取消订单</view>
                                    <!-- 实物商品未取消 以及服务商品已付款时显示 -->
                                    <view class="popup-text" @click="delOrder(item.orderId)"
                                        v-if="item.orderType == 0 && item.orderStatus !== 5"
                                        :class="{ 'activePopup': popupCurrent == 2 && (current === item.orderNo && popoverShow) }">
                                        删除订单</view>
                                </view>
                            </view>
                        </view>
                        <!-- 售后的-->
                        <template v-if="activeTab == 5 || orderStatus == 8">
                            <view class="btnAreaRight" v-if="orderStatus == 8 || activeTab">
                                <button type="default" plain class="blackBlackBtn" @click="delAfterSaleOrderRecord(item.afterSalesId,item)">删除记录</button>
                            </view>
                        </template>
                        <template v-else>
                            <template v-if="item.orderType=='0'">
                                <!-- 待发货 -->
                                <view class="btnAreaRight" v-if="item.orderStatus == 0">
                                    <button type="default" plain class="blackBlackBtn r12" @click="toLogisticsDetail(item)">查看物流</button>
                                    <button type="default" plain class="blackBlackBtn" @click="changeAddress(0,item.orderStatus,item.orderId)">修改地址</button>
                                </view>
                                <!-- 待收货 -->
                                <view class="btnAreaRight"
                                    v-if="item.orderStatus == '1' || (item.orderStatus =='10'&& activeTab!==5)">
                                    <button type="default" plain class="blackBlackBtn r12" @click="toLogisticsDetail(item)">查看物流</button>
                                    <button type="default" plain class="blackBlackBtn" @click="openCheckShouhuo(item)">确认收货</button>
                                </view>
                                <!-- 待评价 -->
                                <view class="btnAreaRight" v-if="item.orderStatus == '2'">
                                    <button type="default" plain class="blackBlackBtn r12"  @click="toLogisticsDetail(item)">查看物流</button>
                                    <button type="default" plain class="blackBlackBtn r12" @click="addToCart(item)">再次购买</button>
                                    <button type="default" plain class="blackBlackBtn" @click="toJudge(item)">去评价</button>
                                </view>
                                <!-- 已完成 -->
                                <view class="btnAreaRight" v-if="item.orderStatus == '3'">
                                    <button type="default" plain class="blackBlackBtn " :class="{'r12':item.isCommentFollowups==1}" @click="toLogisticsDetail(item)">查看物流</button>
                                    <button type="default" plain class="blackBlackBtn"  @click="toFollowUpJudge(item)"  v-if="item.isCommentFollowups=='1'">去追评</button>
                                </view>
                                <!-- 待付款 -->
                                <view class="btnAreaRight" v-if="item.orderStatus == '4'">
                                    <button type="default" plain class="blackBlackBtn r12"  @click="addToCart(item)">加入购物车</button>
                                    <button type="default" plain class="blackBlackBtn r12"  @click="changeAddress(0,item.orderStatus,item.orderId)">修改地址</button>
                                    <!-- <button type="default" plain class="submitBtn" @click="toPayment(item.orderNo)">继续付款</button> -->
                                    <button type="default" plain class="blackBlackBtn" @click="toPayment(item)">继续付款</button>
                                </view>
                                <!-- 交易关闭 -->
                                <view class="btnAreaRight"  v-if="item.orderStatus == '5' || item.orderStatus == '7'">
                                    <button type="default" plain class="blackBlackBtn r12"  @click="delOrder(item.orderId)">删除订单</button>
                                    <button type="default" plain class="blackBlackBtn"  @click="addToCart(item)">再次购买</button>
                                </view>

                            </template>
                            <!-- 服务商品 -->
                            <template v-if="item.orderType=='1'">
                                <!-- 待付款 -->
                                <view class="btnAreaRight">
                                    <button type="default" plain class="blackBlackBtn r12" @click="delOrder(item.orderId)" v-if="Number(item.orderStatus)!==6">删除订单</button>
                                    <button type="default" v-if="Number(item.orderStatus) == 4" plain class="blackBlackBtn" @click="toPayment(item)">去付款</button>
                                    <button type="default" v-if="Number(item.orderStatus)== 6 || Number(item.orderStatus) == 0"  plain class="blackBlackBtn" :class="{'r12':Number(item.orderStatus)==6}"  @click="toUseService">去使用</button>
                                    <button type="default" v-if="Number(item.orderStatus) == 7 || Number(item.orderStatus) == 5 || Number(item.orderStatus) == 3 || Number(item.orderStatus)==6 " plain class="blackBlackBtn"  @click="submitAnotherOrder(item)">再次购买</button>
                                </view>
                                <!-- <view class="btnAreaRight" v-if="item.orderStatus == '5' || item.orderStatus == '3' ">
                                    <button type="default" plain class="blackBlackBtn r12" @click="delOrder(item.orderId)">删除订单</button>
                                    <button type="default" plain class="blackBlackBtn" @click="addToCart()">再次购买</button>
                                </view>
                                <view class="btnAreaRight" v-if="item.orderStatus == 6  ">
                                    <button type="default" plain class="blackBlackBtn r12" @click="delOrder(item.orderId)">删除订单</button>
                                    <button type="default" plain class="blackBlackBtn" @click="toUseService">去使用</button>
                                </view> -->
                            </template>
                        </template>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { SOURCE_TYPE } from '@/utils/constant'

export default {
    components: {
    },
    props: {
       orderList:{
           type:Array,
           default:()=>{
               return []
           }
       },
       activeTab:{
            type:Number,
            default:0
       },
       orderStatus:{
            type:Number,
            default:0
       },
       source:{
            type:String,
            default:()=>{
                return ''
            }
       }
    },
    data() {
        return {
            popoverShow: false,
            current: 0,
            bubbleTop: 0,
            bubbleLeft: 0,
            popupDisplay:'none',
            popupCurrent:-1,  //弹窗里面的选项


        }
    },
    watch:{
       
    },
    onLoad(data) {
        if(data!==null){

        }
    },
    onReady () {
        console.log(this.type,'type')
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
     // 新增物流状态转换方法
        formatLogisticStatus(status) {
            const map = {
                'ORDER_PAID': '已下单',
                'ORDER_CREATED': '已下单',
                'PROCESSING': '仓库处理中',
                'WAREHOUSE_PROCESSING': '仓库处理中',
                'IN_TRANSIT': '运输中',
                'ARRIVED': '已到达自提点',
                'ARRIVED_AT_PICKUP_POINT': '已到达自提点',
                'DELIVERED': '已签收',
                'PICKED_UP': '已签收',
                'CANCELLED': '已取消',
            };
            return map[status] || status; // 保留未知状态原样显示
        },
        getAfterSaleOrderListStatusText(status) {     /** 售后单列表状态 1=退款中 2=退款成功 3=退款关闭**/
            switch (status?.toString()) {
                case '1': return '退款中';
                case '2': return '退款成功';
                case '3': return '退款关闭';
                default: return '未知状态';
            }
        },
        //状态码转换方法
        getOrderStatusText(status) {
            switch (status?.toString()) {
                case '-1': return '全部订单';
                case '0': return '待发货';
                case '1': return '待收货';
                case '2': return '已收货，待评价';
                case '3': return '已完成';
                case '4': return '等待买家付款';
                case '5': return '交易关闭'; //已取消，交易关闭
                case '6': return '待使用';
                case '7': return '交易关闭'; //待支付 超时未支付  申请售后成功
                case '8': return '退款/售后';
                case '9': return '已删除';  //订单已删除
                case '10': return '待收货';  //已签收的状态   但是订单是还未确认收货的状态  所以实质上是跟待收货一样的
                default: return '未知状态';
            }
        },
        // 售后订单状态转码  /** 售后单类型 1=退货退款2=退款**/

        getAfterSaleOrderTypeText(status) {
            switch (status?.toString()) {
                case '1': return '退货退款';
                case '2': return '退款';
                case '3': return '其他';
                case '4': return '服务退款';
                default: return '未知状态';
            }
        },
        getAfterSalesProcessStatusText(status){
            return this.afterSalesStatusText[status] || status; // 保留未知状态原样显示
        },
        // 一个订单多个商品 轮播展示
        lookInfo(index,e,item){
			this.swiperCurrent = index
            console.log(index, item, '组件', this.tabCurrent, 'tabCurrent++', this.swiperCurrent)
		},
                // 更多  气泡卡片
        popover (orderNum,item) {
            // // 关闭其他项的气泡卡片
            this.orderList.forEach(i => {
                if (i.orderNum !== orderNum) {
                    i.flag = false;
                }
            });
            if ([4, 0].includes(item.orderStatus)) { // 待付款/待发货状态
                this.popupCurrent = 1;  // 对应取消订单项
            } else if (![4, 5].includes(item.orderStatus)) { // 非待付款/售后状态
                this.popupCurrent = 0;  // 对应申请开票项
            }

            item.flag = !item.flag;
            this.popoverShow = !this.popoverShow; // 增加显隐状态切换
            const query = wx.createSelectorQuery().in(this);
            query.select('.moreButton').boundingClientRect((rect) => {
                console.log(rect,'rect------')
                if (!rect) return; // 添加空值判断
                // 添加强制更新DOM的代码
                this.$nextTick(() => {
                    // this.bubbleLeft = rect.left;
                    this.bubbleLeft = 0;
                    // const windowInfo = wx.getWindowInfo();
                    // const bubbleWidth = 180; // 气泡卡片宽度180rpx
                    // const rpx = windowInfo.screenWidth / 750; // rpx转换系数
                    // this.bubbleLeft = rect.left - rect.left + (rect.width - (bubbleWidth * rpx)) / 2;
                    console.log(this.bubbleLeft,'bubbleLeft')
                    this.bubbleTop = 8; // 气泡卡片距离顶部的距离
                })
                this.current = orderNum;
            }).exec();
            this.popupCurrent=-1
        },

        handlePopup () {
            this.handlePopup = !this.handlePopup
        },
         
        // 跳转商品详情页面
        // 跳转商品详情
        toOrderDetail (item, val, status) {
            console.log(item, val, 'toOrderDetail', status)
            const params = {}
            params.item = item
            params.id = val
            params.orderStatus = status
            params.orderNo = item.orderNo
            params.orderId = item.orderId
            params.source = this.source
            params.afterSalesId = item.afterSalesId
            params.afterSalesType = item.afterSalesType
            params.mpAfterSalesStatus = item.mpAfterSalesStatus

            // debugger
            if (status == 4) { //待付款
                params.status = 'unpaid'
            } else if (status == 0) { //待发货
                params.status = 'unshipped'
            } else if (status == 1) { //待收货
                params.status = 'unreceived'
            } else if (status == 2) { //待评价
                params.status = 'unrewied'
            } else if (status == 8) { //售后
                params.status = 'refund'
            }
            console.log(this.activeTab, item.orderType, !item.orderType,params,'params---')
            if (this.activeTab == 5) { //售后 未返回orderType
                if (status == 8 || this.orderStatus == 8 || item.afterSalesType) { //售后
                    uni.navigateTo({
                        url:
                            '/pages/orders/refundOrderDetail?params=' +
                            encodeURIComponent(JSON.stringify(params))
                    })
                } 
            }else{ 
                if (item.orderType == '1') {  //服务  待使用服务  6: 待使用
                    uni.navigateTo({
                        url:
                            '/pages/orders/awaitUseService?params=' +
                            encodeURIComponent(JSON.stringify(params))
                    })
                } else if (item.orderType == '0') {
                    //  订单状态（-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款 5: 已取消
                    //  6: 待使用 7:已关闭 8. 售后中(售后退款) 9:已删除 10: 已签收)
                    // if (status == 0 || status == 4 || status == 5) {  //待付款 4 待发货 0 已取消 5（跟付款无关的取消）
                        uni.navigateTo({
                            url:
                                '/pages/orders/orderDetails?params=' +
                                encodeURIComponent(JSON.stringify(params))
                        })
                    // } else {  //待收货1  待评价 2 已完成3  if(status == 2 || status == 1 || status == 3) 10: 已签收
                    //     uni.navigateTo({
                    //         url:
                    //             '/pages/orders/judgeOrderDetail?params=' +
                    //             encodeURIComponent(JSON.stringify(params))
                    //     })
                    // }
                }
            }


        },

        //   跳转 物流详情
        toLogisticsDetail (item) {
            if(item.orderStatus == 4){
                return
            }
            console.log(item.orderStatus, 'toLogisticsDetail')  
            const params = {
                orderNo:item.orderNo,
                orderId:item.orderId,
                orderStatus:item.orderStatus,
                source:this.source
            }
            uni.navigateTo({
                url:
                    '/pages/orders/logisticsDetail?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        addToCart (item) {
          this.$emit('addToCart', item)
        },
        // 服务 再次购买
        submitAnotherOrder (item) {
            console.log(item, 'submitAnotherOrder')
        },
         // 修改地址
        changeAddress (val,status,orderId) {
            const params = {
                house:val,
                myHouse:true,
                orderStatus:status,
                orderId:orderId,
                source:this.source
            }
            uni.navigateTo({
                url: '/pages/orders/orderDetails?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },

        delOrder (orderId) { 
            this.$emit('delOrder', orderId)
        },
        delAfterSaleOrderRecord (afterSalesId,item) {
            this.$emit('delAfterSaleOrderRecord', afterSalesId,item)
        },
        // 去使用  服务
        toUseService(){
            uni.navigateTo({ url: '/pages/myService/myService' })
        },
        toJudge (item) {
           this.$emit('toJudge', item)
        },
        // 去追评
        toFollowUpJudge (item) {
            this.$emit('toFollowUpJudge', item)
        },
        openCheckShouhuo (item) {
            this.$emit('openCheckShouhuo', item)
        },
        showTaxInvoice () {
            this.$emit('showTaxInvoice')
        },
        // 取消订单
        cancelOrder (item) {
            this.$emit('cancelOrder', item)
        },
    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    // height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}

.orderList_bg{
    background:#f9f9f9;
    padding-bottom:5px;
}
.orderList {
    padding: 24px 24px 15px 24px;
    background-color: #ffffff;
    width: calc(100% - 48px);

    // 待付款
    .orderTop {
        display: flex;
        align-items: center;
    }

    // 有复选框  右侧商品的样式
    .orderTopRight {
        width: 100%;
    }

    // 已付款
    .listTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .listTopLeft {
            font-size: 26rpx;
            color: #666666;
            line-height: 26rpx;
            text-align: left;
        }

        .listTopRight {
            color: #FF6203;
            text-align: right;
            line-height: 26rpx;
            font-size: 26rpx;
        }
    }

    .goodsDetail {
        margin-top: 11px;
        width: 100%;

        .wraper_left {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 11px;
        }

        .wraper_left:last-child {
            margin-bottom: 0px;
        }

        .wraper_products_info{
            display: flex;
        }
        .goodsPic {
            width: 33%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .goods_tips {
            margin-top: 6px;
            font-size: 22rpx;
            text-align: left;
            color: #888888;
            line-height: 22rpx;
        }
    }

    // 物流
    .logistics {
        background: #f9f9f9;
        display: flex;
        align-items: center;
        padding: 20rpx;
        margin-top: 11px;
        width: calc(100% - 40rpx);


        .logistics_status {
            font-size: 22rpx;
            color: #111111;
            // line-height: 22rpx;
            margin-left: 16rpx;
            width: calc(100% - 54rpx);
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */

        }
        .afterSaleStatus {
            font-size: 22rpx;
            color: #111111;
            margin-left: 16rpx;
        }

        .logistics_detail {
            font-size: 22rpx;
            color: #111111;
            // line-height: 22rpx;
            margin-left: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }
    }
}

.goodsText {
    position: relative;
    width: 67%;
    margin-left: 14px;
    // width: 150px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: space-between;
    padding-top: 12rpx;
    padding-bottom: 20rpx;
    text-align: left;

    .goodsText_top {
        display: flex;
        flex-direction: column;
        .goodsTop {
                // position: absolute;
                // top: 2%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
        
                .goods_T {
                    max-width: 80%;
                    font-size: 28rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 28rpx;
                    // margin-top: 9px;  //display：flex   中 元素居中
                    white-space: nowrap;
                    /* 防止文本换行 */
                    overflow: hidden;
                    /* 超出部分隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                }
        
                // 商品价格
                .goods_price {
                    font-size: 28rpx;
                    // color: #737373;
                    color: #111111;
                    line-height: 28rpx;
                }
            }

        // 规格
        .goodsMiddle {
            margin-top: 20rpx;
            // position: absolute;
            // top: 25%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .goods_specs {
                // margin-top: 7px;
                max-width: 80%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;
                //   line-height: 11px;

                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
            }

            .goods_num {
                font-size: 22rpx;
                line-height: 22rpx;
                color: #666666;
            }
        }
    }



    .goodsText_bottom {
        // position: absolute;
        // bottom: 0%;
        // top: 77%;
        // margin-bottom: 14rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .jifen_box {
            font-size: 28rpx;
            text-align: left;
            color: #111111;
            line-height: 28rpx;
            height: 28rpx;
        }
        // .productActualTotalPay{
        //     font-size: 28rpx;
        //     text-align: left;
        //     color: #999999;
        //     line-height: 28rpx;
        //     height: 28rpx;
        // }

        .judgeBtn {
            border: 1px solid #FF6203;
            border-radius: 20px;
            font-size: 24rpx;
            text-align: center;
            color: #FF6203;
            line-height: 24rpx;
            padding: 5px 13px;
        }
    }
}
// 多个商品订单右侧的 价格+数量
.goodsListText{
    width: 20%;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(255, 255, 255, 0.66);

    .goods_price{
        color: #333333;
        font-size: 28rpx;
        line-height: 28rpx;
    }
    .goods_num{
        font-size: 22rpx;
        color: #666666;
        line-height: 22rpx;
        margin-top: 24rpx;
    }
}
// 多个商品的样式
.goodsDetailInfo_wrapper{
    display: flex;
    width: 100%;
    margin-bottom: 11px;
}
//一个订单商品超过2个  横向滚动
.goodsListWrapper{
    position: relative;
    width: 80%;
}
.hotSale_content{
    position: relative;
    display: flex;

    .shangpinList{
        // flex: 1;
        width: 26%;
        // margin-bottom: 12px;
        background: #ffffff;
        // width: 121px;
        // height: 226px;
        
        .renqi_img{
            position: relative;
            width: 100%;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // width: 121px;
            // height: 121px;
            // line-height: 121px;

            img{
                width: 100%;
                height: auto;
            }
        }
        .status_tips {
            position: absolute;
            height: 100%;
            width: 100%;
            background: rgb(0, 0, 0, 0.60);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            font-size: 20rpx;
            color: #ffffff;
            bottom: 0px;
        }

    }
}
// 热卖推荐轮播组件
.top-menu-view {
    display: flex;
    // position: fixed;
    white-space: nowrap;
    width:100%;

    .shangpinList {
        display: inline-block;
        margin-right: 6px;
        position: relative;
    }
}
.fixDiv {
    min-height: 226px;
    width: 10px;
    right: 0px;
    background: linear-gradient(270deg, #ffffff 25.52%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    z-index: 1;
}
.last-top-menu-view {
    // width: calc(100% - 46px);
}
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

.btnArea {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btnAreaLeft {
        color: #888888;
        font-size: 11px;
        line-height: 11px;
    }

    .btnAreaRight {
        display: flex;
        justify-content: space-between;

        .grayBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 14px;
            text-align: center;
            color: #D4D4D4;
            height: 62rpx;
            line-height: 60rpx;
            border: 1rpx solid #D4D4D4;
            padding-left: 10px;
            padding-right: 10px;
            margin-right: 12px;
        }

        // 黑字灰框按钮
        .blackBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 14px;
            text-align: center;
            color: #111111;
            height: 60rpx;
            line-height: 60rpx;
            border: 1px solid #D4D4D4;
            padding-left: 10px;
            padding-right: 10px;
            margin-right: 12px;
        }
        // 黑字黑框按钮
        .blackBlackBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #111111;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #111111;
            padding-left: 10px;
            padding-right: 10px;
            min-width: 156rpx;
        }
        // 红字红框
        .submitBtn {
            background-color: transparent;
            border-radius: 38px;
            font-size: 14px;
            text-align: center;
            color: #FF6203;
            height: 60rpx;
            line-height: 60rpx;
            border: 1px solid #FF6203;
            padding-left: 10px;
            padding-right: 10px;

        }

        button {
            border: none;
        }
    }
}

// 气泡卡片
.bubble_card {
    width: 180rpx;
    // max-height: 60vh; /* 防止超出屏幕 */
    // overflow-y: auto; /* 内容过多时显示滚动条 */
    z-index: 1000;
    position: absolute;
    display: inline-block;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 11px;
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.2);
}

.bubble_card::before {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: -10px;
    left: 25%;
    transform: translateX(-50%);
    content: " ";
    position: absolute;
    // box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
//   width: 0;
//   height: 0;
//   border-style: solid;
//   border-width: 0 8px 8px 8px ;
//   border-color: transparent transparent #e10707  transparent;
// //   left: 50%;
// //   margin-left: -5px;
//     top: -8px;
//     filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     // filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
//     // clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 定义三角形裁剪路径 */
}
// .bubble_card::after {
//     content: "";
//     position: absolute;
//     width: 0;
//     height: 0;
//     border-style: solid;
//     border-width: 0 8px 8px 8px ;
//     border-color: transparent transparent #fff  transparent;
//     top: -8px;
//     -webkit-filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     z-index: 2;
//     clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 根据三角形形状调整裁剪路径 */
// }

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.bubble-content {
    text-align: center;
    // padding:0rpx 6rpx;
}
.bubble {
  position: relative;
  background-color: #f2f2f2; /* 气泡窗背景颜色 */
  border-radius: 10px; /* 气泡窗圆角 */
  padding: 10px; /* 气泡窗内边距 */
  box-shadow: 0 0 5px #ccc; /* 气泡窗阴影 */
}
 
.bubble cover-image {
  width: 81px;
  height: 35px;
  position: absolute;
  top: 10px;
//   left: -60px; /* 根据图片大小调整 */
}
 
.bubble text {
  font-size: 22rpx;
  color: #111111;
}
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    position: relative;
}
.popup-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.popup-text {
    font-size: 22rpx;
    text-align: center;
    color: #111111;
    padding:20rpx;
    background-color: #ffffff;
}
.borderbottom{
    border-bottom: 1px solid #f9f9f9;
}
.activePopup{
    // background-color: #f9f9f9;
    color: #FF6203;
}
.more-btn {
    margin-top: 10px;
    cursor: pointer;
}

.t16 {
    margin-top: 16px;
}

.t21 {
    margin-top: 21px;
}
.r12 {
    margin-right: 24rpx;
}

// 气泡卡片
.bubble_card {
    width: 180rpx;
    // max-height: 60vh; /* 防止超出屏幕 */
    // overflow-y: auto; /* 内容过多时显示滚动条 */
    z-index: 1000;
    position: absolute;
    display: inline-block;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 11px;
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.2);
}

.bubble_card::before {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: -10px;
    left: 25%;
    transform: translateX(-50%);
    content: " ";
    position: absolute;
    // box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
//   width: 0;
//   height: 0;
//   border-style: solid;
//   border-width: 0 8px 8px 8px ;
//   border-color: transparent transparent #e10707  transparent;
// //   left: 50%;
// //   margin-left: -5px;
//     top: -8px;
//     filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     // filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
//     // clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 定义三角形裁剪路径 */
}
// .bubble_card::after {
//     content: "";
//     position: absolute;
//     width: 0;
//     height: 0;
//     border-style: solid;
//     border-width: 0 8px 8px 8px ;
//     border-color: transparent transparent #fff  transparent;
//     top: -8px;
//     -webkit-filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     z-index: 2;
//     clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 根据三角形形状调整裁剪路径 */
// }

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.bubble-content {
    text-align: center;
    // padding:0rpx 6rpx;
}
.bubble {
  position: relative;
  background-color: #f2f2f2; /* 气泡窗背景颜色 */
  border-radius: 10px; /* 气泡窗圆角 */
  padding: 10px; /* 气泡窗内边距 */
  box-shadow: 0 0 5px #ccc; /* 气泡窗阴影 */
}
 
.bubble cover-image {
  width: 81px;
  height: 35px;
  position: absolute;
  top: 10px;
//   left: -60px; /* 根据图片大小调整 */
}
 
.bubble text {
  font-size: 22rpx;
  color: #111111;
}

.borderbottom {
    border-bottom: 1px solid #f9f9f9;
}

.activePopup {
    // background-color: #f9f9f9;
    color: #FF6203;
}


</style>
